<template>
  <div>
    <van-nav-bar
      title="商家"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-notice-bar scrollable text="看一看瞧一瞧，买不了吃亏买不了上当" />
    <div class="user_shops">
      <van-image
        fit="cover"
        round
        position="center"
        width="20vw"
        height="20vw"
        :src="shops.avatar_url"
        class="avatar_url"
      >
      </van-image>
      <div class="shops_user_desc">
        <div class="van-ellipsis">
          {{ shops.nickname }}
        </div>
        <div class="shops_user_desc_data">
          营业时间：{{ shops.work_time }}
          <van-button
            @click="del_collect"
            href="#"
            class="shops_collect"
            color="red"
            round
            >取消收藏</van-button
          >
          <van-button
            @click="add_collect"
            href="#"
            round
            class="shops_collect"
            color="red"
            >收藏</van-button
          >
          <br />

          {{ shops.intro }}<br />
          创建时间:{{ datetime(shops.date_joined) }}<br /><br /><br />
        </div>
      </div>
    </div>
    <div>
      <van-tabs v-model:active="active" swipeable>
        <van-tab>
          <template #title> <van-icon />点菜 </template>
          <show_goods></show_goods>
        </van-tab>
        <van-tab>
          <template #title> <van-icon />店家评论 </template>
          <comment></comment>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { onClickLeft, datetime } from "../../utlis/utils.js";
import show_goods from "./show_goods.vue";
import comment from './comment.vue'
export default {
  components: {
    show_goods,
    comment,
  },
  data() {
    return {
      onClickLeft,
      datetime,

      shops_id: this.$route.query.shops_id,
      user_id: localStorage.getItem("id"),
      active: 0,
      shops: {},
      collect: true,
    };
  },
  created() {
    this.submit();
  },
  methods: {
    submit: function () {
      this.myaxios(
        this.host + "shops/userinfo/" + this.shops_id + "/",
        "get"
      ).then((data) => {
        console.log(data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          this.shops = data.data;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    add_collect: function () {
      this.myaxios(this.host + "users/collect/" + this.shops_id + "/", "post", {
        user_id: this.user_id,
      }).then((data) => {
        console.log(data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          this.collect = false;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    del_collect: function () {
      this.myaxios(
        this.host + "users/collect/" + this.shops_id + "/",
        "delete",
        {
          user_id: this.user_id,
        }
      ).then((data) => {
        console.log(data);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          this.collect = false;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
  },
};
</script>

<style>
/* .diancai {
  width: calc(100% - 6vw);
  padding: 3vw;
  height: 22vw;
} */
.user_shops {
  padding: 3vw;
  width: calc(100% - 6vw);
  height: 22vw;
  background-color: white;
  border-top: 1px solid #ebedf0;
  border-bottom: 1px solid #ebedf0;
}
.avatar_url {
  float: left;
}
.shops_collect {
  color: black;
  margin-right: 2vw;
  float: right;
}
.shops_user_desc {
  float: left;
  padding-left: 3vw;
  width: calc(100% - 23vw);
}
.shops_user_desc_data {
    height: 85px;
  margin-top: 1vw;
  color: #969799;
  line-height: 4vw;
  font-size: 3vw;
}
</style>